<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="./js/angular.min.js"></script>
<script type="text/javascript" src="./js/angular-route.js"></script> 
<script type="text/javascript" src="./js/angular-ui-router.js"></script>
<style type="text/css">
a{margin-right:30px;}
</style>
</head>
<body> 
<!-- 参考： https://blog.csdn.net/zcl_love_wx/article/details/52034193-->
<!-- 参考： https://blog.csdn.net/yangjvn/article/details/47703973 -->
<div ng-app="myApp" ng-controller="myAppController">
    <a ui-sref="home">首页</a>
    <a ui-sref="list">列表</a>
    <a ui-sref="details">详情</a>
    <div ui-view></div>
</div>
<!-- 实现效果：首页有一级栏目，点击一级栏目进入一级栏目的列表，点击列表进入详情 -->
<script type="text/javascript">
//var hash = window.location.hash;
// #/list?id=1
// var oHash = hash.replace("#/list?id=","");
// var ooHash = hash.replace(/^#\/list\?id=/,"");
// var oooHash = hash.replace(/^#\/list\?id=[0-9]&name=/,"");
// console.log(oHash);
// console.log(ooHash);
// console.log(oooHash);
var chanenalUrl = "http://www.ng.com/json/channels.json"; // 频道
var listUrl = "http://www.ng.com/json/list.json"; // 频道列表
var detailsUrl = "http://www.ng.com/json/details.json";//详情
var myApp = angular.module('myApp', ['ui.router','homeModule','listModule','detailsModule']);
myApp.config(["$stateProvider",function($stateProvider){      
    $stateProvider
    .state("home",{
        url: '/home', 
        templateUrl:"page/home.html",
        controller:"homeController"
    })
    .state("list",{
        url:'/list',
        templateUrl :'page/list.html',
        controller:"listController"
    })
    .state("details",{
        url:'/details',
        templateUrl:'page/details.html',
        controller:"detailsController"
    });
}]);
// 主控制器
myApp.controller("myAppController",function($scope,$http){
    $scope.username = "张三";
    $scope.ajaxPost = function(url,data,fun){
    	$http({  
		    method:'post',  
		    url:url,  
		    data:data,  
		    headers:{'Content-Type': 'application/x-www-form-urlencoded'},  
		    transformRequest: function(obj) {  
		        var str = [];  
		        for(var p in obj){  
		            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));  
		        }  
		        return str.join("&");  
		    }  
		}).success(function(res){
			fun(res);
		});
    };
});
// home 控制器
angular.module("homeModule",[]).controller('homeController',function($scope){
	$scope.title = "这里是Home控制器";
	$scope.channels = null;
	$scope.ajaxPost(chanenalUrl,{},function(res){
		$scope.channels = res.data.channels;
	}); 
});
angular.module("listModule",[]).controller('listController',function($scope){
	$scope.title = "频道列表";
	$scope.curId = null;
	$scope.curchannallist = null;
	var curHash = window.location.hash; 
	if(curHash.replace(/^#\/[a-zA-Z]*/,"").length != 0){
		$scope.curId = window.location.hash.replace(/^#\/[a-zA-Z]*\?id=/,"");
		$scope.title = "频道"+$scope.curId+"列表";
		$scope.ajaxPost(listUrl,{pageNo:1,pageSize:10,channelId:$scope.curId},function(res){
			 console.log(res);
			 $scope.curchannallist = res.data.programmes;
		}); 
	};
});
angular.module("detailsModule",[]).controller('detailsController',function($scope){
	$scope.title = "频道详情列表";
	$scope.detailsId = null;
	$scope.detailsHash = window.location.hash;
	if($scope.detailsHash.replace(/^#\/[a-zA-Z]*/,"").length != 0){
		$scope.detailsId = $scope.detailsHash.replace(/^#\/[a-zA-Z]*\?id=/,"");
		$scope.title = "频道"+$scope.detailsId+"详情列表";
		console.log($scope.detailsId);
		$scope.ajaxPost(detailsUrl,{code:$scope.detailsId},function(res){
			console.log(res);
		});
	};
});

</script>
</html>